<template>
  <div class="weather-header" @click="goToWeatherPage">
    <div class="weather-info">
      <div class="date-text">今天 {{ formattedDate }}</div>
      <div class="temp-text">
        {{ currentTemperature }}°C {{ weatherDescription }}
      </div>
      <div class="city-text">{{ currentCity }} · 空气质量优</div>
    </div>
    <div class="weather-icon">
      <img :src="weatherIcon" alt="天气图标" />
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useWeatherStore } from "../store/weather";

const router = useRouter();

const weatherStore = useWeatherStore();

// 组件挂载时优先使用缓存数据
onMounted(() => {
  // 尝试获取缓存数据
  const cachedData = weatherStore.getWeatherData();

  // 如果没有缓存数据，才发送API请求
  if (!cachedData) {
    weatherStore.fetchWeatherData();
  }
});

// 跳转到天气详情页面
const goToWeatherPage = () => {
  router.push("/weather");
};

// 获取当前天气数据
const currentWeather = computed(() => weatherStore.currentWeather);
const currentCity = computed(() => weatherStore.location.city || "未知城市");
const currentTemperature = computed(() => {
  if (!currentWeather.value || !currentWeather.value.temperature) return "--";

  // 尝试将温度字符串转换为数字
  const tempString = currentWeather.value.temperature;
  const tempNumber = parseFloat(tempString.replace(/[^0-9.]/g, ""));

  // 检查是否为有效数字
  if (isNaN(tempNumber)) return "--";

  return Math.round(tempNumber);
});

// 计算天气图标 - 使用可靠的OpenWeather图标服务
const weatherIcon = computed(() => {
  if (!currentWeather.value || !currentWeather.value.type)
    return "../assets/icons/sunny.svg";

  // 使用与weather.js中相同的emoji图标映射
  const iconMap = {
    晴: "/src/assets/icons/sunny.svg",
    多云: "/src/assets/icons/cloudy.svg",
    阴: "/src/assets/icons/lunar.svg",
    小雨: "/src/assets/icons/sprinkle.svg",
    中雨: "/src/assets/icons/moderate.svg",
    大雨: "/src/assets/icons/heavy.svg",
    雷阵雨: "/src/assets/icons/thunderstorm.svg",
    雪: "/src/assets/icons/snow.svg",
    雾: "/src/assets/icons/fog.svg",
  };

  const weatherType = currentWeather.value.type;

  // 优先精确匹配
  if (iconMap[weatherType]) {
    return iconMap[weatherType];
  }

  // 然后尝试包含匹配
  for (const [key, icon] of Object.entries(iconMap)) {
    if (weatherType.includes(key)) {
      return icon;
    }
  }

  // 如果都匹配不到，返回默认图标文件名
  return "../assets/icons/sunny.svg";
});

// 格式化日期显示
const formattedDate = computed(() => {
  const now = new Date();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const weekdays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const weekday = weekdays[now.getDay()];

  return `${weekday}  ${month}  /  ${day}`;
});

// 天气描述
const weatherDescription = computed(() => {
  if (!currentWeather.value || !currentWeather.value.type) return "未知";

  return currentWeather.value.type;
});

// 穿搭建议
const clothingSuggestion = computed(() => {
  if (!currentWeather.value || !currentWeather.value.temperature) {
    return "请参考当地天气情况选择合适衣物";
  }

  const tempString = currentWeather.value.temperature;
  const tempNumber = parseFloat(tempString.replace(/[^0-9.]/g, ""));
  const condition = currentWeather.value.type || "";
  const suggestions = [];

  // 根据温度给出建议
  if (tempNumber < 5) {
    suggestions.push("建议穿着羽绒服、厚大衣等保暖衣物");
  } else if (tempNumber < 10) {
    suggestions.push("建议穿着毛衣、外套等保暖衣物");
  } else if (tempNumber < 15) {
    suggestions.push("建议穿着夹克、薄毛衣等适中衣物");
  } else if (tempNumber < 20) {
    suggestions.push("建议穿着长袖衬衫、薄外套等轻便衣物");
  } else if (tempNumber < 25) {
    suggestions.push("建议穿着短袖、薄长裤等清凉衣物");
  } else {
    suggestions.push("建议穿着短袖、短裤等夏季衣物");
  }

  // 根据天气状况补充建议
  if (condition.includes("雨")) {
    suggestions.push("记得携带雨伞");
  } else if (condition.includes("雪")) {
    suggestions.push("注意防滑保暖");
  } else if (condition.includes("雾") || condition.includes("霾")) {
    suggestions.push("外出请佩戴口罩");
  } else if (condition.includes("晴") && tempNumber > 25) {
    suggestions.push("注意防晒");
  }

  return suggestions.join("，");
});
</script>

<style scoped>
.weather-header {
  background: #e9eaff;
  border-radius: 24px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weather-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.date-text {
  color: #7e89f0;
}
.temp-text {
  color: #000;
  font-weight: bold;
  font-size: 18px;
}
.city-text {
  color: #999999;
}
.weather-icon img {
  width: 64px;
  height: 64px;
}
</style>
